<template>
  <basic-layout>
    <view class="cate">
      <image :src="we" class="pic" mode="widthFix" />
    </view>
  </basic-layout>
</template>

<script lang="ts" setup>
import BasicLayout from "@/layouts/basic-layout.vue";
import { onMounted, ref } from "vue";
import we from "@/assets/imgs/we.png";
import Taro from "@tarojs/taro";
import http from "@/utils/http";
const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";

definePageConfig({
  // navigationBarTitleText: '分类',
  navigationStyle: 'custom'
});

Taro.setNavigationBarTitle({
  title: "关于我们"
});
// 分类列表数据
const cateList = ref([
  { name: "质量保证", imgUrl: pic, id: 1 },
  { name: "现场评估", imgUrl: pic, id: 2 },
  { name: "明码标价", imgUrl: pic, id: 3 },
  { name: "售后保障", imgUrl: pic, id: 4 },
]);


// 当前选中的分类
const currentCate = ref(0);

// 商品列表数据
const goodsList = ref(
  [...Array(12)].map((_, i) => ({
    id: i + 1,
    name: "32度三花醇酒",
    price: Math.floor(Math.random() * 100),
    imgsUrl: pic,
  }))
);

onMounted(() => {
  // http.post(`/api/mallIndex/goodsType`).then((res) => {
  //   console.log("res 商品类型", res);
  //   cateList.value = res.data.map((i) => i.columns);
  //   getGoods(cateList.value[0].id);
  // });
});

function getGoods(typeId){
  http.postQuery(`/api/mallIndex/getGoodsByType`, {typeId: typeId}).then((res) => {
    console.log("res 商品列表", res);
    goodsList.value = res.data.map((i) => i.columns);
  });
}

const systemInfo = Taro.getSystemInfoSync()
console.log("goodsList", goodsList.value);
console.log("systemInfo", systemInfo);
// 跳转到商品详情页
const goToDetail = (id: number) => {
  Taro.navigateTo({
    url: `/pages-detail/detail/index?id=${id}`,
  });
};

// 切换分类
const switchCate = (index: number) => {
  currentCate.value = index;
  // TODO: 根据分类加载对应商品列表
  getGoods(cateList.value[index].id);
};
</script>

<style lang="scss">
.basic-layout__content {
  width: 750rpx;
}

.cate {
  width: 100%;
  height: 100vh;
  .pic{
    width: 100%;
  }
}
</style>
